<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix ListBox</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/ListBox.js"></script>
  </head>

  <body role="main">
    <div class="demo medium">
      <elix-list-box aria-label="Fruits" style="height: 100%;">
        <div value="acai">Acai</div>
        <div value="akee">Akee</div>
        <div value="apple">Apple</div>
        <div value="apricot">Apricot</div>
        <div value="avocado">Avocado</div>
        <div value="banana">Banana</div>
        <div value="bilberry">Bilberry</div>
        <div value="black sapote">Black sapote</div>
        <div value="blackberry">Blackberry</div>
        <div value="blackcurrant">Blackcurrant</div>
        <div value="blood orange">Blood orange</div>
        <div value="blueberry">Blueberry</div>
        <div value="boysenberry">Boysenberry</div>
        <div value="cantaloupe">Cantaloupe</div>
        <div value="cherimoya">Cherimoya</div>
        <div value="cherry">Cherry</div>
        <div value="chicofruit">Chico fruit</div>
        <div value="clementine">Clementine</div>
        <div value="cloudberry">Cloudberry</div>
        <div value="coconut">Coconut</div>
        <div value="crab apple">Crab apple</div>
        <div value="cranberry">Cranberry</div>
        <div value="cucumber">Cucumber</div>
        <div value="currant">Currant</div>
        <div value="damson">Damson</div>
        <div value="date">Date</div>
        <div value="dragonfruit">Dragonfruit</div>
        <div value="durian">Durian</div>
        <div value="elderberry">Elderberry</div>
        <div value="feijoa">Feijoa</div>
        <div value="fig">Fig</div>
        <div value="gojiberry">Goji berry</div>
        <div value="gooseberry">Gooseberry</div>
        <div value="grape">Grape</div>
        <div value="grapefruit">Grapefruit</div>
        <div value="guava">Guava</div>
        <div value="honeyberry">Honeyberry</div>
        <div value="honeydew">Honeydew</div>
        <div value="hornedmelon">Horned melon</div>
        <div value="huckleberry">Huckleberry</div>
        <div value="jabuticaba">Jabuticaba</div>
        <div value="jackfruit">Jackfruit</div>
        <div value="jambul">Jambul</div>
        <div value="japaneseplum">Japanese plum</div>
        <div value="jostaberry">Jostaberry</div>
        <div value="jujube">Jujube</div>
        <div value="juniperberry">Juniper berry</div>
        <div value="kiwifruit">Kiwifruit</div>
        <div value="kumquat">Kumquat</div>
        <div value="lemon">Lemon</div>
        <div value="lime">Lime</div>
        <div value="longan">Longan</div>
        <div value="loquat">Loquat</div>
        <div value="lychee">Lychee</div>
        <div value="mandarin">Mandarin</div>
        <div value="mango">Mango</div>
        <div value="mangosteen">Mangosteen</div>
        <div value="marionberry">Marionberry</div>
        <div value="miraclefruit">Miracle fruit</div>
        <div value="mulberry">Mulberry</div>
        <div value="nance">Nance</div>
        <div value="nectarine">Nectarine</div>
        <div value="orange">Orange</div>
        <div value="papaya">Papaya</div>
        <div value="passionfruit">Passionfruit</div>
        <div value="peach">Peach</div>
        <div value="pear">Pear</div>
        <div value="persimmon">Persimmon</div>
        <div value="pineapple">Pineapple</div>
        <div value="pineberry">Pineberry</div>
        <div value="plantain">Plantain</div>
        <div value="plum">Plum</div>
        <div value="pluot">Pluot</div>
        <div value="pomegranate">Pomegranate</div>
        <div value="pomelo">Pomelo</div>
        <div value="purplemangosteen">Purple mangosteen</div>
        <div value="quince">Quince</div>
        <div value="rambutan">Rambutan</div>
        <div value="raspberry">Raspberry</div>
        <div value="redcurrant">Redcurrant</div>
        <div value="salak">Salak</div>
        <div value="salalberry">Salal berry</div>
        <div value="salmonberry">Salmonberry</div>
        <div value="satsuma">Satsuma</div>
        <div value="soursop">Soursop</div>
        <div value="starapple">Star apple</div>
        <div value="starfruit">Star fruit</div>
        <div value="strawberry">Strawberry</div>
        <div value="surinamcherry">Surinam cherry</div>
        <div value="tamarillo">Tamarillo</div>
        <div value="tamarind">Tamarind</div>
        <div value="tangerine">Tangerine</div>
        <div value="uglifruit">Ugli fruit</div>
        <div value="watermelon">Watermelon</div>
        <div value="whitecurrant">White currant</div>
        <div value="whitesapote">White sapote</div>
        <div value="yuzu">Yuzu</div>
      </elix-list-box>
    </div>
  </body>
</html>
